<template>
  <view class="layout">
    <view class="content-container">
      <custom-navigate
        class="custom-navigate"
        v-if="navTitle"
        :title="navTitle"
        :statusBarHeight="statusBarHeight"
        :leftIcon="navLeftIcon"
      />
      <view class="main-container">
        <slot></slot>
      </view>
    </view>

    <custom-tabBar v-if="isTabBar" />
  </view>
</template>

<script>
export default {
  props: {
    navTitle: {
      type: String,
      default: "",
    },
    navLeftIcon: {
      type: Boolean,
      default: true,
    },
    isTabBar: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      statusBarHeight: 0,
      navHeight: 0,
    };
  },
  mounted() {
    const systemInfo = getApp().globalData.systemInfo;
    this.statusBarHeight = systemInfo.statusBarHeight;
    this.navHeight = systemInfo.navBarHeight;
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.layout {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #f4f4f4;
  overflow: hidden;
  display: flex;
}

.content-container {
  flex-grow: 1;
  width: 100%;
  position: relative;
  overflow: hidden auto;
  display: flex;
  flex-direction: column;

  .custom-navigate {
    width: 100%;
    top: 0px;
    z-index: 100;
    position: sticky;
    background-color: #fff;
  }

  .main-container {
    flex-grow: 1;
    width: 100%;
    position: relative;
    overflow: hidden auto;
  }
}
</style>
